<template>
	<view>
		<view>
			<u--text prefixIcon="rmb-circle" iconStyle="font-size: 35px;margin-top:10px" :text="'余额：'+user_balance+'元'"
				color='#10d169' align='center' size='35px' margin='10px'>
			</u--text>
		</view>
		<view style="margin-top: 30rpx;">
			<u-grid :border="true" col="4">
				<u-grid-item v-for="(listItem,listIndex) in prices" :key="listIndex" style="padding: 10px;"
					@click="chooseMoney">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<view style="margin: 10px;">
			<u--text v-show="showtips" size='25px' color='#0090ed' align='center' :text="'选择了'+choosePrice+'元'">
			</u--text>
		</view>

		<view style="margin: 10px;position: fixed; width: 95%;
		bottom: 60%;">
			<u-button text="充值" color="linear-gradient(to right, rgb(22, 212, 107), rgb(83, 83, 83))" @click="recharge"
				:disabled="showRecharage">
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getBalance,
		addBalance
	} from '@/config/api.js'
	export default {
		data() {
			return {
				showRecharage: true,
				showtips: false,
				choosePrice: null,
				user_balance: null,
				prices: [{
						name: 'level',
						title: '100元'
					},
					{
						name: 'level',
						title: '200元'
					},
					{
						name: 'level',
						title: '300元'
					},
					{
						name: 'level',
						title: '500元'
					},
					{
						name: 'level',
						title: '1000元'
					},
					{
						name: 'level',
						title: '10000元'
					},
				]
			}
		},
		onLoad() {
			//查询当前用户余额
			let name = '';
			let token = '';
			uni.getStorage({
				key: 'user_name',
				success: function(res) {
					name = res.data
				}
			})
			uni.getStorage({
				key: 'user_token',
				success: function(res) {
					token = res.data
				}
			})

			getBalance({}, {
				params: {
					token: token,
					name: name
				}
			}).then(res => {
				console.log(res);
				this.user_balance = res.balance
			})


		},
		methods: {
			recharge() {
				//本来是要调用支付接口的，但是因为我们是个人用户，做不了，做个假的玩一下就好了
				// uni.$u.toast("用户要充值的金额为" + this.choosePrice)
				//将来有机会  可以去做一下真的支付接口
				//查询当前用户余额
				let name = '';
				let token = '';

				uni.getStorage({
					key: 'user_name',
					success: function(res) {
						name = res.data
					}
				})
				uni.getStorage({
					key: 'user_token',
					success: function(res) {
						token = res.data
					}
				})
				//请求发起去充值对应用户的余额  fake
				addBalance({}, {
					params: {
						token: token,
						name: name,
						price: this.choosePrice
					}
				}).then(res => {
					console.log(res);
					getBalance({}, {
						params: {
							token: token,
							name: name
						}
					}).then(res => {
						console.log(res);
						this.user_balance = res.balance
					})
					setTimeout(() => {
						uni.$u.toast("充值成功")
					}, 1000)
				}).catch(e => {
					console.log(e);
				})

			},
			chooseMoney(index) {
				console.log(index);
				this.showRecharage = false
				this.showtips = true
				switch (index) {
					case 0:
						this.choosePrice = 100
						break;
					case 1:
						this.choosePrice = 200
						break;
					case 2:
						this.choosePrice = 300
						break;
					case 3:
						this.choosePrice = 500
						break;
					case 4:
						this.choosePrice = 1000
						break;
					case 5:
						this.choosePrice = 10000
						break;
				}
			}
		}
	}
</script>

<style>

</style>
